<template>
  <div class="register">
    <div class="register-head">手机号注册</div>
    <div class="input-wrap"><input type="text" class="input-item" placeholder="请输入手机号" v-model="phone"></div>
    <div class="input-wrap"><input type="text" class="input-item v-code" placeholder="请输入验证码" v-model="vCode"><span class="send-v-code" :class="{active: isSend}" @click="sendOutCode">{{isSend?countDown+'s':'获取验证码'}}</span></div>
    <div class="input-wrap pwd"><input :type="pwdInputType" class="input-item" maxlength="22" placeholder="请输入6-22位不含特殊字符的密码" v-model="pwd">
    <img src="../../images/hiden-pwd.png" @click="seePwd = !seePwd" v-if="seePwd">
    <img src="../../images/show-pwd.png" @click="seePwd = !seePwd" v-else><!-- <span @click="seePwd = !seePwd">{{seePwd?'隐藏':'显示'}}</span> --></div>
    <div class="input-wrap"><input type="text" class="input-item" placeholder="邀请码" v-model="iCode"></div>
    <button class="wx-btn" @click="isNext" :class="{active: isSecond}">下一步</button>
    <div class="tip"><input type="checkbox" :vaule="protocol" v-model="protocol">注册即同意<a href="javascript:void(0);">《用户注册协议》</a></div>

    <div v-transfer-dom>
      <popup v-model="secondSteps" height="100%" width="100%" style="background:#fff;" position="right">
        <div class="second-steps">
          <div class="second-head">请选择你的身份</div>
          <!-- 这段以后优化 -->
          <div class="identity-wrap">
            <div class="identity-item">
              <div class="identity-text">设计院</div>
              <check-icon :value.sync="identity1" @click.native="identity1 = true; identity2 =false; identity3 = false; identity=1"></check-icon>
            </div>
            <div class="identity-item">
              <div class="identity-text">用户</div>
              <check-icon :value.sync="identity2" @click.native="identity2 = true; identity1 =false; identity3 = false;identity=2"></check-icon>
            </div>
            <div class="identity-item">
              <div class="identity-text">代理商</div>
              <check-icon :value.sync="identity3" @click.native="identity3 = true; identity1 =false; identity2 = false;identity=3"></check-icon>
            </div>
          </div>
          <!--  -->
           <!-- isX: isIphoneX -->
          <button class="complete wx-btn" :class="{active: isComplete}" @click="complete">完成</button>
        </div>
      </popup>
    </div>
  </div>
</template>

<script>

  import Vue from 'vue'
  import { Popup, TransferDom, CheckIcon, ToastPlugin } from 'vux'
  import axios from 'axios'
  import tools from 'COMMON/tools'
  Vue.use(ToastPlugin)

  export default {
    name: 'register',
    data: function() {
      return {
        secondSteps: false,
        identity1: false,
        identity2: false,
        identity3: false,
        identity: 0,
        phone: "",
        vCode: "", // 验证码
        pwd: "",
        iCode: "22222", // 邀请码
        isSend: false,
        countDown: 60,
        protocol: true,
        seePwd: false
      }
    },
    directives: {
      TransferDom
    },
    components: {
      Popup,
      CheckIcon
    },
    mounted() {
      this.iCode = tools.getArg('invite_code', String(location.href).replace(/[#]*$/g, ""));
    },
    computed: {
      pwdInputType() {
        return this.seePwd ? 'text' : 'password'
      },
      isSecond() { // 注册页能点下一步
        return this.phone != '' && this.vCode != '' && this.pwd != '';
      },
      isComplete() {
        return this.identity1 || this.identity2 || this.identity3;
      },
      isIphoneX() {
        return /iphone/gi.test(navigator.userAgent) && (screen.height == 724 && screen.width == 375)
      }
    },
    methods: {
      isNext() {
        if (!this.isSecond || !this.protocol) {
          return;
        }
        if(this.pwd.length < 6) {
          alert('密码长度不足6位')
        }
        this.secondSteps = true;
      },
      complete() {
        if(!this.isComplete) {
          return false;
        }

        let that = this;
        axios.post('/login/register', {
          phone: that.phone,
          verify_code: that.vCode,
          password: that.pwd,
          type: that.identity,
          invite_code: that.iCode,
        }).then((res) => {
          if (res.msg == 'success') {
            that.$vux.toast.text('注册成功', 'middle');
            // todo: 注册成功跳转首页
            window.location.href = "/login.html?time="+((new Date()).getTime());
          } else {
            that.$vux.toast.text(res.msg, 'middle');
          }
        })
      },
      sendOutCode() {
        if(this.isSend || this.phone == "" ) {
          return;
        }
        let that = this;
        tools.checkPhoneFormat(this.phone)
          .then(() => {
            if (window.DEBUGGING) {
              this.isSend = true;
              let time = setInterval(()=>{
                if(this.countDown == 0) {
                  clearInterval(time);
                  this.isSend = false;
                  this.countDown = 60;
                  return;
                }
                this.countDown--;
              },1000)
            }

            axios.post('/Utility/sendVerifyCode',{
              phone: that.phone,
              type: 2
            }).then((res) => {
              that.isSend = true;
              let time = setInterval(()=>{
                if(that.countDown == 0) {
                  clearInterval(time);
                  that.isSend = false;
                  that.countDown = 60;
                  return;
                }
                that.countDown--;
              },1000)
            }) 
          })
        .catch((err) => {
          that.$vux.toast.text(err, 'middle');
        })
      }
    }
  }
</script>

<style lang="less">
  @import '~COMMON/common.less';

body {background-color: #fff;}
  .register {
    padding: 0 20px;
    padding-top: 70px;
    .register-head {
      font-size: 20px;
      font-weight: bold;
      color: #4A4A4A;
    }
    .input-wrap {
      position: relative;
      // .Placeholder-color(#ccc);
      margin-top: 30px;
      .input-item {
        box-sizing: border-box;
        font-size: 16px;
        border: none;
        outline: none;
        width: 100%;
        padding-left: 10px;
        line-height: 44px;
        border-bottom: 1px solid #EEEEEE;
      }
      .v-code {
        padding-right: 100px;
      }
      .send-v-code {
        position: absolute;
        right: 0;
        bottom: 0;
        font-size: 16px;
        line-height: 48px;
        color: #4A90E2;
        &.active {
          color: #4A90E2;
        }
      }
    }
    .pwd {
      position: relative;
      padding-right: 25px;
      >img {
        position: absolute;
        top: 15px;
        right: 5px;
        width: 18px;
        height: 12px;
      }
    }
    .tip {
      margin-top: 20px;
      font-size: 12px;
      >input {
        vertical-align: middle;
      }
      >a {
        color: #4f93e3;
      }
    }
  }

  .second-steps {
    padding: 0 20px;
    color: #333;
    .second-head {
      font-weight: bold;
      font-size: 20px;
      margin-top: 4rem;
      margin-bottom: 50px;
    }
    .identity-wrap {
      display: flex;
      .identity-item {
        flex: 1;
        margin-right: 10px;
        padding: 0.55rem 0.75rem 0.8rem 0.65rem;
        text-align: right;
        border-radius: 4px;
        background-color: #f4f6f8;
        .identity-text {
          text-align: left;
          margin-bottom: 2.75rem;
        }
        &:nth-last-of-type(1) {
          margin-right: 0px;
        }
      }
    }
    .complete {
      position: fixed;
      bottom: 80px;
      margin: 0 auto;
      width: 90%;
    }
  }
</style>